<template>
	<view>
		<view class="top">
			<image class="top_img" src="../../../static/pay/ali_selected.png" mode=""></image>
			<view class="top_title">绑定支付宝账号</view>
		</view>
		<view class="aliPayInfo">
			<u--form class="form" labelAlign="center" >
				<u-form-item labelWidth="80" label="姓名" borderBottom>
					<u--input 
					    v-model="alipayName" 
							border="none"
							placeholder="请输入支付宝名称"
					>
					</u--input>
				</u-form-item>
				<u-form-item labelWidth="80"  label="账号" borderBottom>
					<u--input 
					    v-model="alipayNo" 
							border="none"
							placeholder="请输入支付宝账号"
					>
					</u--input>
				</u-form-item>
				<u-form-item labelWidth="80" label="手机号" borderBottom>
					<u--input 
					    v-model="memberPhone" 
							border="none"
							placeholder="请输入手机号"
					>
					</u--input>
				</u-form-item>
				<u-form-item labelWidth="80" label="验证码" borderBottom>
					<u--input 
					    v-model="code"
							border="none"
							placeholder="请输入验证码"
					>
					</u--input>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
							@change="codeChange"></u-code>
					<u-button style="color: #FFFFFF;"
						slot="right"
						size="mini"
						:text=tips
						color="#12B9A3"
						@tap="getCode"
					></u-button>
				</u-form-item>
			</u--form>
		</view>
		
	 <view class="button" @click="bindAliPayAcount">
	 	确认绑定
	 </view>
		
		
	</view>
</template>

<script>
	import {
		verifyPhone,
		bindingAlipay
	} from '../../../common/api.js';
	export default {
		data() {
			return {
				alipayName: '',
				alipayNo : '',
				memberPhone : '',
				code : '',
				tips : '',
				seconds : 60
			}
		},
		methods: {
			//获取验证码
			getCode(){
				if(!uni.$u.test.mobile(this.memberPhone)) {
					uni.showToast({
						icon:'none',
						title:'请输入正确的手机号'
					})
					return;
				}
				if(this.$refs.uCode.canGetCode) {
			      //发送验证码
				  verifyPhone(
				    this.memberPhone
				  ).then(res=> {
					 uni.$u.toast('验证码已发送');
					 this.$refs.uCode.start();
				  })
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
			 this.tips = text;	
			},
			start() {
			  
			},
			end() {
				
			},
			bindAliPayAcount() {
			  if(this.$u.test.isEmpty(this.alipayName)) {
				 uni.$u.toast('请输入支付宝名称');
				 return
			  }else if(this.$u.test.isEmpty(this.alipayNo)) {
				 uni.$u.toast('请输入支付宝账号');
				 return
			  }else if(this.$u.test.isEmpty(this.memberPhone)) {
				 uni.$u.toast('请输入手机号');
				 return
			  }else if(this.$u.test.isEmpty(this.code)) {
				 uni.$u.toast('请输入验证码');
				 return
			  }else {
				  //绑定支付宝账号
				  bindingAlipay({
				    memberNo : this.$store.state.user.userInfo.customerId,
				    alipayNo : this.alipayNo,
				    alipayName : this.alipayName,
				    code : this.code,
				    memberPhone : this.memberPhone 
				  }).then(res=> {
				  	 uni.$u.toast('绑定账户绑定成功');
				  	 uni.navigateBack({
				  	 	
				  	 })
				  })
			  }
			  
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		margin-top: 40upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&_img {
			width: 150upx;
			height: 150upx;
		}
		&_title {
			font-size: 30upx;
			color: #666666;
			margin-top: 20upx;
		}
	}
	
	.aliPayInfo {
		background-color: #ffffff;
		border-radius: 16upx;
		margin: 30upx;
	}
	
	.form {
		padding: 0 30upx;
		
	}
	.button {
		background-color: $green12;
		color: #FFFFFF;
		margin: 30upx;
		line-height: 80upx;
		font-size: 36upx;
		text-align: center;
		border-radius: 16upx;
	}
</style>
